<template>
    <div class="default-main ba-table-box">
        <div class="remark" style="">
            <span>客户账号：{{ state.user_info.username }}</span>
            <span>预备金：{{ state.user_info.money }}원</span>
            <span>{{ state.remarks.parent_place_order_type.name }} - {{ state.remarks.place_order_type.name }}</span>
            <span><span class="btn btn-small font-size-13" @click="againSelect">重新选择</span></span>
        </div>
        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('security.dataRecycle.Rule name') })"
        >
            <!-- 可以在此处以插槽的方式设置一些自定义按钮 -->
            <span class="btn" type="warning" style="margin-left: 12px;" @click="subOrder">提交订单</span>
        </TableHeader>

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm ref="formRef" :form-data="addFormData" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, provide, markRaw } from 'vue'
import baTableClass from '/@/utils/baTable'
import { copyOrder } from '/@/api/most/placeOrder/oneShot'
import { subOrderApi, getRemarks, add } from '/@/api/most/place_order/place_order'
import { getUserInfo } from '/@/api/most/user/user'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import { ElMessageBox, roleTypes } from 'element-plus'

import { useRoute } from 'vue-router'

import sellerType from './render/sellerType.vue'


defineOptions({
    name: 'place_order/place_order',
})

import router from '/@/router'
const route = useRoute()

const { t } = useI18n()
const tableRef = ref()
const formRef = ref()

const state = reactive({
    user_info:[],
    user_id: route.query.user_id,
    place_order_type: route.query.place_order_type,
    remarks: {
        place_order_type: [],
        parent_place_order_type: []
    }
});

const againSelect = () => {
    router.push({ path: '/admin/place_order/index' })
}


const subOrder = () => {
    ElMessageBox.confirm('确定提交全部订单?', '', { type: 'warning'}).then(() => {
        subOrderApi(state.user_id, 'oneShot').then((e) => {
            console.log(e)
            baTable.table.filter!.search?.push({ field: 'user_id', val: state.user_id, operator:'=' })
            baTable.getIndex()
        })
        
    }).catch(() => {
    // catch error
        console.log('取消');
    })
    
}

// 刷新用户信息
const refershRemarks = () => {
    
    getRemarks(state.user_id, state.place_order_type).then((res) => {
        state.user_info = res.data.user;
        state.remarks.place_order_type = res.data.place_order_type;
        state.remarks.parent_place_order_type = res.data.parent_place_order_type;
    })
}


refershRemarks();


let optButtons = defaultOptButtons([])

// 自定义一个新的按钮
let newButton: OptButton[] = [
    {
        render: 'basicButton', // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        name: 'copy', // 按钮名称
        title: 'copy', // 鼠标放置时的 title 提示
        text: '复制', // 直接在按钮内显示的文字，title 有值时可为空
        type: 'success', // 按钮类型，请参考 element plus 的按钮类型
        icon: '', // 按钮 icon
        class: 'margin-left-none',
        disabledTip: true, // tipButton 禁用 tip
        click: (row: TableRow, field: TableColumn) => { // 自定义点击事件
            ElMessageBox.confirm('确定生成一份相同数据?', '温馨提示', {type: 'warning'}).then(() => {
                console.log(row.id)
                copyOrder(row.id).then((e) => {
                    console.log(e);
                    baTable.table.filter!.search?.push({ field: 'user_id', val: state.user_id, operator:'=' })
                    baTable.getIndex()
                })
                
            }).catch(() => {
            // catch error
                console.log('取消');
            })
        },
        display: (row: TableRow, field: TableColumn) => { // 按钮是否显示，请返回布尔值
            return true;
        },
        disabled: (row: TableRow, field: TableColumn) => { // 按钮是否禁用，请返回布尔值
            return false;
        },
        attr: {} // 自定义el-button属性
    },
    {
        render: 'basicButton', // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        name: 'edit',
        title: 'edit',
        text: '编辑',
        type: 'primary',
        icon: '',
        class: 'margin-left-none'
    },{
        render: 'confirmButton',
        name: 'delete',
        title: '',
        text: '删除',
        type: 'danger',
        icon: '',
        class: 'margin-left-none',
        popconfirm: {
            confirmButtonText: t('delete'),
            cancelButtonText: t('Cancel'),
            confirmButtonType: 'danger',
            title: t('Are you sure to delete the selected record?'),
        }
    }
]

// 新按钮合入到默认的按钮数组
optButtons = newButton.concat(optButtons)


const baTable = new baTableClass(
    new baTableApi('/admin/place_order.PlaceOrder/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { 
                label: t('商家号'), 
                prop: 'seller', 
                align: 'center', 
                operator: 'LIKE', 
                operatorPlaceholder: t('Fuzzy query'),
                render: 'customTemplate', 
                customTemplate: (row: TableRow, field: TableColumn, value: any, column: TableColumnCtx<TableRow>, index: number) => {
                    return value ;
                }
            },
            
            {
                label: t('商品图片'),
                prop: 'goods_image',
                align: 'center',
                render: 'image'
            },
            {
                label: t('补充图片'),
                prop: 'supplement_images',
                align: 'left',
                render: 'images',
            },
            { label: t('颜色'), prop: 'color', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('尺码'), prop: 'size', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('分类'), prop: 'category', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('数量'), prop: 'number', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('采购价格'), prop: 'purchase_price', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('总价'), prop: 'total_price', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            {
                label: t('类型'),
                prop: 'type',
                align: 'center',
                render: 'customRender',
                customRender: markRaw(sellerType),
            },
            {
                label: t('订单选项'),
                prop: 'option',
                align: 'center',
                render: 'tag',
                replaceValue: { '0': t('只要现货'), '3': t('接受预定3天'), '7': t('接受预定7天'), '14': t('接受预定14天') },
            },
            { label: t('备注'), prop: 'note', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            {
                label: t('Operate'),
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: optButtons,
                operator: false,
            },
        ],
        dblClickNotEditColumn: ['all'],
        
    }, {
        defaultItems: {
            option: '7',
            user_id: state.user_id
        },
        
        
    }, {
        // 添加前获取控制器和数据表
        toggleForm: ({ operate }) => {
            if (operate == 'Add' || operate == 'Edit') {
                baTable.form.loading = true
                add().then((res) => {
                    addFormData.seller = res.data.seller
                    addFormData.color = res.data.color
                    addFormData.size = res.data.size
                    addFormData.category = res.data.category
                    baTable.form.loading = false
                })
            }
        },
    },{
        onSubmit: () => {
            refershRemarks()
        },
    }
)

const addFormData = reactive({
    seller: {},
    color: {},
    size: {},
    category: {}
})

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.table.filter!.search?.push({ field: 'user_id', val: state.user_id, operator:'=' })
    baTable.getIndex()
})
</script>


<style scoped lang="scss">
.remark{
    padding: 16px 16px; 
    background: #fff;
}
.remark > span{
    margin-right: 20px;
}

:deep(.ba-data-table .ml-6){
    margin-left: 0!important;
}

:deep(.ba-data-table .margin-left-none){
    margin-left: 0!important;
    margin-bottom: 8px;
    padding: 6px 12px;
}


:deep(.ba-data-table .margin-left-none:last-child){
    margin-bottom: 0px;
}
:deep(.table-operate-text){
    padding-left: 0;
}
:deep(.font-size-13){
    font-size: 13px;
}
</style>
